<template>
  <div class="page has-navbar bar-calm" style="height:100%;" v-nav="{ title: '工作记录', showBackButton: true, onBackButtonClick: back , menuButtonText: menuButtonText,}">
  
    <scroll class="page-content" :on-refresh="onRefresh" :on-infinite="onInfinite" ref="scroller" style="display:flex;">
  

      <div  class="" style="height:1rem;background-color:#fff;" ></div> 
      <item v-for="(listItem,key) in list" :key="key" style="padding-top:0.2rem;height:15rem;padding-bottom:0.2rem;padding:0;display:flex;justify-content: space-around;border:0;">
  
        <div v-on:click.stop="jump(listT)" v-if="listT&&listT.title" style="height:14rem;width:46%;margin-top:0.4rem;box-shadow: rgb(136, 136, 136, 0.2) 1px 1px 8px;border-radius:0.4rem;" v-for="(listT,key) in listItem" :key="key">
  
          <img v-if="listT&&listT.img" :src="listT.img" alt="img" style="width:100%;height:8rem;display:block;margin-bottom:0.4rem;border-radius:0.4rem 0.4rem 0 0;" />
  
          <p class="show_dot Dark" style="font-size: 1.5rem;height:2rem;line-height:2rem;color:#484746" v-if="listT&&listT.title">{{listT.title}}</p>
  
          <p class="show_dot Royal" style="margin-top:0.4rem" v-if="listT&&listT.time">{{listT.time|dataF}}</p>
  
        </div>
  
        <div v-else style="height:14rem;width:46%"></div>
  
      </item>
  
      <!-- <div style="clear:left;"></div> -->
      <div v-if="finish" slot="infinite" class="text-center">没有更多数据</div>
      <!-- </div> -->
    </scroll>
  </div>
</template>
<style scoped>
  .page.has-navbar .page-content {
  
  
  }
  
  .page-content {
  
    height: 100%;
  
  }
  
  .flex_c {
  
    display: flex;
  
    justify-content: space-between;
  
    flex-wrap: wrap;
  
    align-items: flex-start;
  
    align-content: flex-start
  
  }
  
  .show_dot {
  
    text-align: center;
  
    overflow: hidden;
  
    text-overflow: ellipsis;
  
    white-space: nowrap;
  
  }
</style>
<script>
  import axios from 'axios'
  
  import {
  
    treeDataTranslate
  
  } from "../util/Fromatetree.js"
  
  import item from "./item/index.vue"
  
  export default {
  
    data() {
  
      return {
  
        list: [],
  
        bottom: "",
  
        pageNo: 1,
  
        pageSize: 10,
  
        infiniteCount: 4,
  
        finish: false,
  
        menuButtonText: '<span class="assertive">更多</span>'
  
      }
  
  
  
    },
  
    created() {
  
      this.onRefresh()
  
  
  
    },
  
    methods: {
  
      jump(data) {
  
        console.log("jump", data)
  
        $router.push("/AboutDetail");
  
        sessionStorage.setItem("adboutData", JSON.stringify(data))
  
      },
  
      formateData(data) {
  
        let result = [];
  
        if (data.length == 1) {
  
          console.log("datalength", [data[0],
  
            []
  
          ])
  
          return [[data[0],[]]]
  
           
  
         
  
        }
  
        for (let x = 0; x < data.length; x++) {
  
          (x + 1) % 2 == 0 ? result.push([data[x - 1], data[x]]) : ""
  
          if (data.length % 2 > 0 && x == data.length - 1) result.push([data[x],
  
            []
  
          ])
  
        }
  
  
  
        return result;
  
      },
  
      onRefresh(done) {
  
        this.getData()
  
          .then((e) => {
  
            console.log(e)
  
            // const result = treeDataTranslate(e.data.data.results);
  
            // console.log('result',result)
  
            const data = this.formateData(e.data.data.results)
  
            console.log("refresh", data)
  
            this.list = data
  
            this.finish = false
  
            this.pageNo = 1
  
            if(data.length <10) this.finish= true;
            done()
  
            //  console.log("list",this.list)
  
          }).catch((e) => {
  
            console.log(e)
  
          })
  
      },
      onInfinite(done) {
  
        console.log("onInfinite")
  
        this.getData(this.pageNo + 1, 10)
  
          .then((e) => {
  
            console.log(e.data.data.results)
  
            if (e.data.data.results.length > 0) {
  
              let result = this.formateData(e.data.data.results)
  
              console.log("result===", result)
  
              this.list = this.list.concat(result);
  
              console.log("list", this.list)
  
              this.pageNo = this.pageNo + 1;
  
            } else {
  
              this.finish = true;
  
            }
  
            if (e.data.data.results.length < 10) {
  
              this.finish = true;
  
            }
  
            setTimeout(() => {
  
              if (this.$refs.scroller)
  
                done();
  
            }, 1000)
  
          }).catch((e) => {
  
            console.log(e)
  
            if (this.$refs.scroller) {
  done();
              // this.$refs.scroller.finishInfinite()
  
            }
  
          })
  
      },
      getData(pageNo = 1, pageSize = 10) {
  
        return axios({
  
          url: '/user/work',
  
          method: 'post',
  
          data: {
  
            pageNo,
  
            pageSize
  
          }
  
        })
  
      },
  
      back() {
  
        $router.back('/')
  
      }
  
    },
  
    filters: {
  
      dataF: function(value) {
  
        return new Date(value).toLocaleString()
  
      }
  
    },
    components: {
      'item': item
    },
  
  }
</script>
